import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { App, Popconfirm, Button } from 'antd'
import { useCopy } from '@/desktop/logics/copy'
import { colors } from '@/desktop/styles'
import { removeApiConfig, type CorpDetail } from '../logics/index'

export function BaseInfo({ detail }: { detail: CorpDetail }) {
  const copy = useCopy()
  const appsInfo = detail.appsInfo ?? null
  const corpName = appsInfo?.corpName
  return <>
    <div className="row">
      <label>企业名称</label>
      <span>{corpName ?? <span css={s.empty}>未设置</span>}</span>
      {corpName ?? '' ? <a onClick={() => copy(corpName!)}>复制</a> : null}
    </div>
    <div className="row">
      <label>企业ID(CropId)</label>
      <span>{detail.corpId}</span>
      <a onClick={() => copy(detail.corpId)}>复制</a>
    </div>
    <div className="row">
      <label>Secret</label>
      <span>{detail.secret}</span>
      <a onClick={() => copy(detail.secret)}>复制</a>
    </div>
    <div className="row">
      <label>CorpIdOrigin</label>
      <span>{detail.corpIdOrigin}</span>
      <a onClick={() => copy(detail.corpIdOrigin)}>复制</a>
    </div>
  </>
}

export function BaseInfoExtra({
  detail,
  edit,
}: {
  detail: CorpDetail
  edit: (detail: CorpDetail) => void
}) {
  const { message } = App.useApp()

  async function remove() {
    const res = await removeApiConfig(detail.corpId)
    if (res.success) void message.success('企业已删除')
    else void message.error(res.error)
  }

  return <>
    <Button key="edit" type="link" icon={<EditOutlined />} onClick={() => edit(detail)}>
      修改企业
    </Button>
    <Popconfirm title="确定要删除此企业吗？" onConfirm={remove}>
      <Button key="delete" type="link" danger icon={<DeleteOutlined />}>
        删除企业
      </Button>
    </Popconfirm>
  </>
}

const s = {
  empty: css`
    color: ${colors.gray};
  `,
}
